<template>
  <base-paenl
    class="inspetion-information-dialog"
    id="InspetionTableDialog"
    v-loading="loading"
    element-loading-text="数据加载中..."
    element-loading-background="rgba(0,0,0,0.8)"
  >
    <div slot="header" class="header-title" @mousedown="mouseDownLeft($event, 'InspetionTableDialog', 100, 600)">巡查登记表</div>
    <div slot="main" class="slot-main">
      <el-scrollbar style="height: 845px"
        ><div class="table">
          <div class="table-row" v-for="item in inspetionInput">
            <span>{{ item.name }}</span>
            <el-input v-if="item.edit" size="mini" v-model="inspetionTable[item.field]" class="search-input"></el-input>
            <span v-else-if="item.render">{{ item.render(inspetionTable[item.field]) }}</span>
            <span v-else>{{ inspetionTable[item.field] }}</span>
          </div>
          <div class="table-row">
            <div class="table-head">
              <div class="icon-star">*</div>
              <span>摄像头情况</span>
            </div>
            <el-radio-group v-model="inspetionTable.formData.sxtqk" @change="handleControl">
              <el-radio :label="'0'">正常</el-radio>
              <el-radio :label="'1'">异常</el-radio></el-radio-group
            >
          </div>
          <div class="table-row">
            <div class="table-head">
              <div class="icon-star" v-show="inspetionTable.formData.sxtqk === '0'">*</div>
              <span>项目运营情况</span>
            </div>
            <el-radio-group v-model="inspetionTable.formData.xmyyqk" :disabled="inspetionTable.formData.sxtqk == '1'" @change="handleControl">
              <el-radio :label="'0'">正常</el-radio>
              <el-radio :label="'1'">异常</el-radio></el-radio-group
            >
          </div>
          <div class="table-row">
            <div class="table-head">
              <div class="icon-star" v-show="inspetionTable.formData.sxtqk === '0'">*</div>
              <span>项目公示情况</span>
            </div>
            <el-radio-group v-model="inspetionTable.formData.xmgsqk" :disabled="inspetionTable.formData.sxtqk == '1'" @change="handleControl">
              <el-radio :label="'0'">正常</el-radio>
              <el-radio :label="'1'">异常</el-radio></el-radio-group
            >
          </div>
          <div class="table-row table-row1">
            <div class="table-head">
              <div class="icon-star" v-show="inspetionTable.formData.sxtqk === '0'">*</div>
              <span>存在问题</span>
            </div>
            <el-input
              v-model="inspetionTable.formData.czwt"
              :autosize="{ minRows: 2 }"
              type="textarea"
              placeholder="请输入存在问题"
            ></el-input>
          </div>
          <div class="table-row table-row1">
            <div class="table-head">
              <div class="icon-star" v-show="inspetionTable.formData.sxtqk === '0'">*</div>
              <span>处置情况</span>
            </div>
            <el-input
              v-model="inspetionTable.formData.czqk"
              :autosize="{ minRows: 2 }"
              type="textarea"
              placeholder="请输入处置情况"
            ></el-input>
          </div>
          <div class="table-row table-row1">
            <div class="table-head">
              <div class="icon-star" v-show="inspetionTable.formData.sxtqk === '0'">*</div>
              <span>附件上传</span>
            </div>
            <el-upload
              drag
              multiple
              :show-file-list="true"
              :auto-upload="true"
              :before-upload="uploadFile"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-preview="downloadFile"
              class="upload-demo"
              accept=".png,.jpg"
              action="/"
              ><i class="el-icon-upload"></i>
              <div class="el-upload_text">
                <div style="color: #fff">点击图标上传截图</div>
                <div style="color: #ffffff80">支持扩展名:.png;.jpg</div>
              </div>
              <!-- <div class="el-upload_tip" slot="tip">
              只能上传jpg/png
            </div> -->
            </el-upload>
          </div>
          <div class="table-btns">
            <div class="grid-info-operate-div" @click="closeDialog">取消</div>
            <div class="grid-info-operate-div" @click="submit">确认</div>
          </div>
        </div></el-scrollbar
      >
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { mouseDownLeft } from '@/assets/modules/utils'
import BasePaenl from './CBase.vue'
import {
  getSzqy,
  getXsxcXmxx,
  createBusiDataRelation,
  updateBusiDataRelation,
  buildCode,
  uploadFile
} from '~/assets/modules/service'

@Component({
  name: 'InspetionTable',
  components: {
    BasePaenl
  }
})
export default class extends Vue {
  get projectInfo() {
    return this.$store.getters['videoData/projectInfo']
  }
  @Watch('projectInfo')
  handleAreaData() {
    this.getXsxcXmxx()
  }
  inspetionTable: any = { formData: {} }
  loading = false
  inspetionInput = [
    {
      name: '巡查日期',
      field: 'xcrq',
      render: this.dealDay,
      edit: false
    },
    {
      name: '巡查人',
      field: 'xcr',
      edit: false
    },
    {
      name: '公寓套数',
      field: 'gyts',
      edit: false
    },
    {
      name: '出租套数',
      field: 'czts',
      edit: true
    },
    {
      name: '出租率',
      field: 'czl',
      render: this.calcCZLPercent,
      edit: false
    },
    {
      name: '有效租赁合同数',
      field: 'yxzlhts',
      edit: true
    },
    {
      name: '租赁合同备案数',
      field: 'zlhtbas',
      edit: false
    },
    {
      name: '合同备案率',
      field: 'rq',
      render: this.calcHTPercent,
      edit: false
    },
    {
      name: '平均租金（元/㎡.月）',
      field: 'pjzj',
      edit: false
    }
  ]
  fileList: any = []
  parmas = {
    busiDataConfigSfid: null,
    formData: {
      czts: '', // 出租套数
      czwt: '', //存在问题
      sxtqk: '0', //摄像头情况
      xmyyqk: '0', //项目运营情况
      xmgsqk: '0', //项目公示情况
      czqk: '', //处置情况
      ywid: '',
      fileupload: '' //附件
    },
    sqrsspq: '', //行政区划
    sfid: ''
  }
  mounted() {
    this.getSzqy()
    this.getXsxcXmxx()
  }
  getSzqy() {
    getSzqy()
      .then((res: any) => {
        console.log(res)
        this.parmas.sqrsspq = res.data.attrValue
      })
      .catch((err) => {
        console.log(err)
      })
  }
  getXsxcXmxx() {
    this.loading = true
    getXsxcXmxx(this.projectInfo.ywid)
      .then((res: any) => {
        console.log(res)
        if (!res.data.formData) {
          res.data.formData = {
            sxtqk: '0', //摄像头情况
            xmyyqk: '0', //项目运营情况
            xmgsqk: '0' //项目公示情况
          }
        }
        this.fileList = this.transforFile(res.data.formData.fileupload)
        this.inspetionTable = res.data
      })
      .catch((err) => {
        console.log(err)
      })
      .finally(() => {
        this.loading = false
      })
  }
  transforFile(fileupload: any) {
    if (fileupload) {
      const fileList = JSON.parse(fileupload)
      return fileList.filter((item: any) => {
        item.name = item.fileName
        return true
      })
    }
    return []
  }
  calcCZLPercent(data: any) {
    if (data) {
      return data
    } else {
      const percent = (this.inspetionTable.czts / this.inspetionTable.gyts) * 100
      return `${percent}%`
    }
  }
  calcHTPercent(data: any) {
    if (data) {
      return data
    } else {
      const percent = (this.inspetionTable.yxzlhts / this.inspetionTable.zlhtbas) * 100 || 0
      return `${percent}%`
    }
  }
  dealDay(data: any) {
    try {
      if (!data) return ''
      const time = data.split('T')[0]
      const week = new Date(time).getDay()
      let weekStr = ''
      switch (week) {
        case 0:
          weekStr = '星期天'
          break
        case 1:
          weekStr = '星期一'
          break
        case 2:
          weekStr = '星期二'
          break
        case 3:
          weekStr = '星期三'
          break
        case 4:
          weekStr = '星期四'
          break
        case 5:
          weekStr = '星期五'
          break
        case 6:
          weekStr = '星期六'
          break
        default:
          break
      }
      return `${time}（${weekStr}）`
    } catch (error) {
      console.log(error)
      return data
    }
  }
  async submit() {
    const win: any = window
    const form = JSON.parse(JSON.stringify(this.inspetionTable))
    console.log('form', form)
    const formData = form.formData
    const parmas: any = {
      busiDataConfigSfid: win.videoDataConfig.busiDataConfigSfid,
      formData: {
        xcrq: form.xcrq, //巡查日期
        xcry: form.xcr, //巡查人
        gyts: form.gyts, //公寓套数
        czts: form.czts, // 出租套数
        yxzlhts: form.yxzlhts, //有效租赁合同数
        zlhtbas: form.zlhtbas, //租赁合同备案数
        sxtqk: formData.sxtqk, //摄像头情况
        pjzj: form.pjzj, //平均租金（元
        status: 'closed',
        ywkx: 'project',
        fqlx: 'zxxc',
        sfid: formData.sfid,
        user_id: form.xcrid,
        dyformDefinitionSfid: win.videoDataConfig.formSfid,
        relate_id: form.ywid,
        sqrsspq: this.parmas.sqrsspq,
        xzqdm: this.parmas.sqrsspq,
      },
      formSfid: win.videoDataConfig.formSfid,
      sfid: form.busiDataSfid
    }
    parmas.formData.xmyyqk = formData.xmyyqk ? formData.xmyyqk : '' //项目运营情况
    parmas.formData.xmgsqk = formData.xmgsqk ? formData.xmgsqk : '' //项目公示情况
    parmas.formData.czwt = formData.czwt ? formData.czwt : '' //存在问题
    parmas.formData.czqk = formData.czqk ? formData.czqk : '' //处置情况
    parmas.formData.fileupload = this.fileList ? JSON.stringify(this.fileList) : '' //附件
    if (parmas.formData.sxtqk === '0') {
      if (!parmas.formData.xmyyqk.length) {
        return this.$message.error('请填写项目运营情况')
      }
      if (!parmas.formData.xmgsqk.length) {
        return this.$message.error('请填写项目公示情况情况')
      }
      if (!parmas.formData.czwt.length) {
        return this.$message.error('请填写存在问题')
      }
      if (!parmas.formData.czqk.length) {
        return this.$message.error('请填写处置情况')
      }
      if (!JSON.parse(parmas.formData.fileupload).length) {
        return this.$message.error('请上传附件')
      }
    }
    if (!parmas.sfid) {
      const res: any = await buildCode(win.videoDataConfig.code)
      parmas.formData.ywid = res.data
      createBusiDataRelation(parmas)
        .then((res: any) => {
          console.log(res)
          if (res.code == 200) {
            this.$message.success('新增成功')
            this.closeDialog()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((error: any) => {
          console.log(error)
        })
    } else {
      updateBusiDataRelation(parmas)
        .then((res: any) => {
          console.log(res)
          if (res.code == 200) {
            this.$message.success('修改成功')
            this.closeDialog()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((error: any) => {
          console.log(error)
        })
    }
  }
  uploadFile(file: any) {
    const formData: any = new FormData()
    formData.append('file', file)
    uploadFile(formData).then((res: any) => {
      console.log('file', res)
      const { fileName, sfid } = res.data
      this.fileList.push({ ...res.data, name: fileName, sfid })
    })
  }
  downloadFile(file: any) {
    const url = '/platform-api/updt-file/repository/file/mongo/download?sfid=' + file.sfid
    const a = document.createElement('a')
    a.href = url
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    a.remove()
  }
  handleRemove(res: any) {
    for (let index = 0; index < this.fileList.length; index++) {
      if (this.fileList[index].sfid === res.sfid) {
        this.$delete(this.fileList, index)
      }
    }
  }
  closeDialog() {
    this.$store.commit("videoPanel/setDialogShow", false)
  }
  handleControl() {
    this.$forceUpdate()
    console.log(this.inspetionTable.sxtqk)
  }
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight)
  }
}
</script>

<style lang="scss" scoped>
.inspetion-information-dialog {
  width: 502px;
  height: 924px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-2.png);
  background-size: 100% 100%;
  position: fixed;
  left: 600px;
  top: 100px;
  z-index: 100;
  color: #b4d8f7;
  .slot-main {
    display: flex;
    justify-content: center;
  }
  .table {
    width: 446px;
  }
  .table-row {
    background-color: #072a4f;
    height: 28px;
    width: 446px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0px 12px;
    .table-head {
      display: flex;
    }
    .icon-star {
      color: #f74c25;
      font-size: 14px;
      font-weight: 900;
    }
  }
  .table-row1 {
    background-color: #072a4f;
    height: auto;
    width: 446px;
    display: block;
    padding: 0px 12px;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: transparent;
    border: none;
    text-align: end;
  }
  ::v-deep.el-textarea {
    margin-top: 8px;
  }
  ::v-deep .el-textarea__inner {
    background-color: #00243e;
    border-color: #1658a0;
    color: #fff;
    font-family: 'AlibabaPuHuiTi_2_55_Regular';
    margin-top: 8px;
  }
  ::v-deep .el-radio {
    color: #fff;
  }
  .el-icon-upload {
    color: #08fbff;
  }
  ::v-deep .el-input {
    width: auto;
  }
  ::v-deep .el-upload-dragger {
    background-color: #00243e;
    margin-top: 8px;
    border-radius: 0px;
    width: 100%;
  }
  ::v-deep .el-upload {
    width: 100%;
    color: #08ebff;
  }
  ::v-deep .el-input__inner {
    text-align: right;
    padding: 0px;
  }
  .search-input {
    color: #fff;
  }
  .table-btns {
    display: flex;
    justify-content: flex-end;
  }
  .grid-info-operate-div {
    width: 72px;
    height: 32px;
    background: url('../../assets/images/panels/guijihuifanganniubeijingqian.png');
    background-size: 100% 100%;
    margin: 0px 12px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
    &:hover {
      background: url('../../assets/images/panels/guijihuifanganniubeijinghou.png');
      background-size: 100% 100%;
      color: #08ebff;
    }
  }
}
</style>
<style lang="scss">
.el-upload-list__item:hover {
  background-color: #174271ab;
}
.el-upload-dragger {
  height: 173px;
}
.el-upload-list__item.is-success .el-upload-list__item-name:focus,
.el-upload-list__item.is-success .el-upload-list__item-name:hover,
.el-upload-list__item-name {
  color: #fff;
  cursor: pointer;
}
.el-upload-list__item .el-icon-upload-success {
  color: #fff;
}
</style>
